<template>
  <div>
    <n-space>
      <n-button @click="showModal1 = true">基本用法</n-button>
      <n-button @click="showModal2 = true">带loading状态</n-button>
      <n-button @click="showModal3 = true">带骨架屏</n-button>
      <n-button @click="showModal4 = true">最大高度滚动区域</n-button>
      <n-button>样式一：blue</n-button>
      <n-button>样式二：grey</n-button>
      <n-button>样式三：brief</n-button>
      <n-button>默认：default</n-button>
      <n-button>
        在config/theme.config
        中对componentStyle.modalStyle进行修改赋值即可查看效果
      </n-button>
    </n-space>

    <pro-modal v-model:show="showModal1" title="基本用法" :height="400">
      内容
    </pro-modal>

    <pro-modal v-model:show="showModal2" title="loading状态" loading>
      <div v-for="index in 10">内容{{ index }}</div>
    </pro-modal>

    <pro-modal v-model:show="showModal3" title="骨架屏状态" skeleton>
      <div v-for="index in 10">内容{{ index }}</div>
    </pro-modal>

    <pro-modal
      v-model:show="showModal4"
      title="最大高度滚动区域"
      :maxHeight="500"
    >
      <div v-for="index in 200">内容{{ index }}</div>
    </pro-modal>
  </div>
</template>

<script lang="ts" setup>
  const showModal1 = ref(false)
  const showModal2 = ref(false)
  const showModal3 = ref(false)
  const showModal4 = ref(false)
</script>

<style lang="less">
  .pro-modal {
    .n-card-header {
      padding: 16px !important;
    }

    .n-card__content {
      margin: 0px !important;
      padding: 14px !important;
    }

    .n-card__footer {
      margin: 0px !important;
      padding: 10px 16px !important;
    }

    .fullscreen-btn {
      width: 22px;
      height: 22px;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    .fullscreen-btn:hover {
      background-color: #e8e8e8;
      border-radius: 5px;
    }
  }
</style>
